<template>
  <div class="spec-table">
    <div class="table">
      <div class="tb-header u-flex">
        <div class="li li-15">规格名称</div>
        <div class="li li-20">封面图</div>
        <div class="li li-15">供应商商品编号</div>
        <div class="li li-15">供应商</div>
        <div class="li li-15">成本价</div>
        <div class="li li-15">系统成本价</div>
        <div class="li li-15">售价</div>
        <div class="li li-15">库存</div>
        <div class="li li-15">状态</div>
        <div class="li li-10">操作</div>
      </div>
      <div
        class="td"
        v-if="specList.length > 0"
        v-for="(item, index) in specList"
      >
        <div class="spec-data u-flex">
          <div class="li li-15">
            <el-input
              v-model="item.spec_name"
              size="mini"
              maxlength="100"
              placeholder="请输入"
            >
            </el-input>
          </div>
          <div class="li li-15">
            <!-- 选择文件 -->
            <attachment-select-btn
              :name="index + ''"
              :dataList="item.spec_image"
              @confirm="specFileConfirm"
            >
            </attachment-select-btn>
          </div>
          <div class="li li-15">
            <el-input
              v-model="item.supplier_product_number"
              size="mini"
              maxlength="100"
              type="number"
            >
            </el-input>
          </div>
          <div class="li li-15">
            <el-input
              v-model="item.supplier_product"
              size="mini"
              maxlength="100"
            >
            </el-input>
          </div>
          <div class="li li-15">
            <el-input
              type="number"
              v-model="item.cost_price"
              step="0.01"
              min="0.01"
              size="mini"
            >
            </el-input>
          </div>
          <div class="li li-15">
            <el-input
              type="number"
              v-model="item.system_cost_price"
              step="0.01"
              min="0.01"
              size="mini"
            >
            </el-input>
          </div>
          <div class="li li-15">
            <el-input
              type="number"
              v-model="item.price"
              step="0.01"
              min="0.01"
              size="mini"
            >
            </el-input>
          </div>
          <div class="li li-15">
            <el-input
              type="number"
              v-model="item.stock"
              min="1"
              size="mini"
            ></el-input>
          </div>
          <div class="li li-15">
            <el-switch
              :active-value="1"
              :inactive-value="2"
              v-model="item.status"
            >
            </el-switch>
          </div>
          <div class="li li-10">
            <!-- <el-button type="text" size="mini" @click="addDiscount(index)">添加优惠</el-button> -->
            <el-button
              style="color: red"
              type="text"
              size="mini"
              @click="delSpec(index)"
              >删除</el-button
            >
          </div>
        </div>
      </div>
    </div>
    <el-button type="success" size="mini" class="addLine" @click="addSpec()"
      >添加规格</el-button
    >
  </div>
</template>

<script>
export { default } from "./data.js"
</script>
<style lang="scss" scoped>
.spec-table {
  overflow-y: auto;
  .table {
    width: 100%;
    border: 1px solid #f0f0f0;

    .tb-header {
      width: 100%;
      height: 50px;
      font-weight: bold;
      font-size: 12px;

      .li {
        text-align: center;
        height: 100%;
        flex-shrink: 0;
      }
    }

    .td {
      width: 100%;
      font-size: 12px;
      padding: 20px 0;
      border-bottom: 1px solid #f6f6f6;

      .li {
        box-sizing: border-box;
        line-height: 60px;
        text-align: center;
        height: 100%;
        flex-shrink: 0;
      }
    }

    .td:last-child {
      border: none;
    }

    .li-10 {
      padding: 0 10px;
      width: 10% !important;
      box-sizing: border-box;
    }

    .li-15 {
      padding: 0 10px;
      box-sizing: border-box;
      width: 15% !important;
    }
    .li-15 {
      padding: 0 10px;
      box-sizing: border-box;
      width: 20% !important;
    }

    .li-8 {
      padding: 0 10px;
      box-sizing: border-box;
      width: 8% !important;
    }

    .li-20 {
      padding: 0 20px;
      width: 20% !important;
      box-sizing: border-box;
    }
  }
}
</style>
